<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" ldq="input1" id="input1">
        <input type="text" ldq="input2" id="input2">
        <button id="ldq">ldq</button>
    </div>
    <script>
        // 我想买化妆品 我决定去代购
        // 化妆品的类
        // 我 --- 代购 -- 化妆品

        // 化妆品
        // var cosmetic = function (something) {
        //     this.something = something
        // }
        // cosmetic.prototype.getSomething = function () {
        //     return this.something
        // }
        // // 我
        // var people = {
        //     buyCosmetic: function (something) {
        //         console.log("请帮我代购" + something);
        //     }
        // }
        // // 代购对象
        // var purchasing = {
        //     buyCosmetic: function (cosmetic) {
        //         people.buyCosmetic(cosmetic.getSomething())
        //     }
        // }
        // purchasing.buyCosmetic(new cosmetic("cpd口红"))

        /**
         * proxy 实现双向绑定
         */

        //  const input = document.getElementById('input')
        //  const input2 = document.getElementById('input2')
        // let data = {
        //     text:'input'
        // }
        // let proxyObj = new Proxy(data,{
        //     get:function(target,prop,value){
        //         console.log(target , prop ,value);
        //         return prop in target ? target[prop] :0
        //     },
        //     set:function(target,prop,value){
        //         console.log(target , prop , value);
        //         return target[prop] = value;
        //     }
        // })
        // proxyObj.text
        // input.addEventListener('input',function(e){
        //     // console.log(e.target.value);
        //     proxyObj.text = e.target.value
        //     input2.value = e.target.value
        //     // console.log(data);
        // })


        // 该双向绑定基于 dom元素的id标签和proxy进行绑定 
        // const input1 = document.getElementById('input')
        // const input2 = document.getElementById('input2')
        // // console.log(input2.getAttributeNode('ldq').value);
        // // 默认属性值
        // var data = {
        //     input1: "1",
        //     input2: "2"
        // }
        // var proxyObj = new Proxy(data, {
        //     get: (target, prop, value) => {
        //         console.log(target, prop);
        //         return prop in target ? target[prop] : false
        //     },
        //     set: (target, prop, value) => {
        //         console.log(target, prop, value);
        //         return target[prop] = value
        //     }
        // })
        // // 初始化数据 把默认数据渲染到元素上
        // // 监听元素 后 data 内容改变
        // for (let item in data) {
        //     // console.log((item));
        //     // console.log(document.getElementById(item));
        //     document.getElementById(item).value = data[item]
        //     document.getElementById(item).addEventListener('input', (e) => {
        //         console.log(e.target.value);
        //         proxyObj[item] = e.target.value
        //         console.log(data);
        //     })
        // }
        // // 监听 data 内容改变后 元素改变
        // document.getElementById('ldq').addEventListener('click',()=>{
        //     console.log(data);
        // })

        // // 缓存代理模式 
        // function proxyAdd(fn){
        //     var cache = {}
        //     return function(){
        //         var key = Array.prototype.join.call(arguments,',')
        //         console.log(key);
        //         // return cache[key]
        //         if(key in cache){
        //             console.log("从缓存中取");
        //             return cache[key]
        //         }else{
        //             console.log("无缓存");
        //             return cache[key] = fn.apply(this,arguments)
        //         }
        //     }
        // }
        // function Sum(a,b){
        //     return a+b
        // }
        // var p = proxyAdd(Sum)
        // console.log(p(1,2));
        // console.log(p(11,21));
        // console.log(p(111,211));
        // console.log(p(1111,2111));

        var i = 0
        var fai = function (n) {
             n < 2 ? n : fai(n - 1) + fai(n - 2)
        }
        // 使用 缓存代理 完成斐波那契数列

        function FB(fn) {
            var cache={}
            return function () {
                var key = Array.prototype.join.call(arguments,",")
                console.log(key);
                if (cache) {
                    return cache[key]
                } else {
                    return cache[key] = fn.apply(this,arguments)
                }
            }
        }
        var f = FB(fb)
        console.log(f(10));
        function fb(n){
            return n < 2 ? n : fai(n - 1) + fai(n - 2)
        }
    </script>
</body>

</html>